Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Syamlal CM syamjayaraj

🎯
Focusing
View GitHub Profile
View Header.jsx
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
nav: {
width: "100%",
position: "fixed",
textAlign: "center",
paddingTop: "1rem",
},
View App.js
import React from "react";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import Card from "./components/Card";
const useStyles = makeStyles(() => ({
root: {
minHeight: "100vh",
background: "#f1f1f1",
},
View Card.jsx
import React, { useEffect, useState } from "react";
import {
Card,
CardContent,
CardActions,
IconButton,
Typography,
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { Skeleton } from "@material-ui/lab";
View styles.scss
.app {
@import "./navbar";
.rule {
padding: 0 2rem;
margin-bottom: 2rem;
}
.container {
margin-top: 8rem;
}
.title {
View _navbar.scss
.navbar {
box-shadow: 0 4px 32px 0 rgba(10, 14, 29, 0.02),
0 8px 64px 0 rgba(10, 14, 29, 0.08);
height: 5rem;
.navbar-nav {
.number {
font-size: 2rem;
}
}
}
View App.js
import React, { useEffect, useState } from "react";
import { Container, Navbar, Nav } from "react-bootstrap";
import Question from "./components/Question";
import "./assets/scss/styles.scss";
import "bootstrap/dist/css/bootstrap.css";
import { LoremIpsum } from "lorem-ipsum";
import ResultModal from "./components/ResultModal";
var randomNumber = require("random-number");
View ResultModal.jsx
import React from "react";
import { Modal, Button } from "react-bootstrap";
import { PieChart } from "react-minimal-pie-chart";
function Question(props) {
let { correct, incorrect, testAgain } = props;
let correctPercentage = (correct / 10) * 100;
let incorrectPercentage = 100 - correctPercentage;
return (
View Question.jsx
import React from "react";
import { Card, ListGroup } from "react-bootstrap";
function Question(props) {
let { question, checkOption } = props;
return (
<Card>
<Card.Body>
<Card.Title>{question.name}</Card.Title>
<ListGroup>
View App.js
import React, { useEffect, useState } from "react";
import { Container, Row, Col } from "react-bootstrap";
import VotingCard from "./components/VotingCard";
import teamsJson from "./lib/teams.json";
import "./assets/scss/styles.scss";
import "bootstrap/dist/css/bootstrap.css";
function App() {
let [teams, setTeams] = useState([]);
View VotingCard.jsx
import React from "react";
import { Card, Button } from "react-bootstrap";
function VotingCard(props) {
let { team, incrementVoteCount } = props;
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={`/assets/images/${team.logo}`} />
<Card.Body>