Rina Kevalani

<p>The code can be improved by implementing better organization and consistency in naming conventions, reducing redundancy, using semantic HTML tags, and avoiding inline styles. Using a CSS preprocessor and relative units can also improve maintainability and scalability. Additionally, accessibility should be considered by adding alt attributes to images.</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
	<title>codedamn Project Style Guide</title>
    
    <style>
        #header {
            margin: 0 auto;
            background-color: white;
        }

        #logo {
            padding-right: 10px;
			margin-top: 2px;
			height: 24px;
        }

		#header-logo {
		    height: 95px;
			position: relative;
		}
		
		#logo-text {
			position: absolute;
			top: 50%; left: 50%;
		    transform: translate(-50%,-50%);
			width: 305px;
		}

        h1 {
            font-family: Manrope;
			font-size: 24px;
			font-style: normal;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0em;
			text-align: left;
			margin: 0px;
			
        }

        h2 {
            font-family: 'Inter', sans-serif;
            font-size:17px;
            color:#263646;
            margin-top:33px;
            margin-bottom:0px;
        }
		
		h2 span {
			font-family: 'Inter', sans-serif;
            font-size:10px;
            color:#777777;
            margin-top:33px;
            margin-bottom:0px;
		
		}

        h3 {
            color:#777777;
            margin-top:8px;
            margin-bottom:30px;
        }

        

        h4 {
            font-family:'Inter';
            font-weight:700;
            color:#777777;
            font-size:14px;
            margin-top: 24px;
            margin-bottom: 0px;

        }
		
		h4 span {
			font-size:12px;
		}
		
		h5 {
			color: white;
			margin: 0px auto;
			padding-top: 7px;
			padding-bottom: 7px;
			
		}
		
		body {
			margin:0px !important;
		}

        span {
            font-family: 'Inter', sans-serif;
            color:#777777;
            margin-top:7px;
            margin-bottom:0px;
            font-size:14px;
        }

        p {
            font-family: 'Inter', sans-serif;
			color: black;
            text-align:center;
            margin-top: 13px;
            margin-bottom: 13px;
        }



        img {
            float:left;
        }

        #main-holder {
            clear:both;
			background-color:#f4f4f5;
        }

        #backgrondcolors {
            
        }
		
		.color-section {
			font-family: Inter;
			font-size: 30px;
			font-style: normal;
			font-weight: 400;
			letter-spacing: 0.01em;
			text-align: left;
			padding: 30px 0 20px 48px;
		}

        #textcolors {
            
        }

        .color-wrapper {
            display:inline-block;
            margin-top: 32px;
			box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			background-color: white;
			margin-left: 49px;
			font-size: 16px;
			font-weight: 500;
        }
        .color-holder {
            width: 184px;
            height: 130px;
            background: #ACACAC;
            margin: auto;
			border-radius: 4px 4px 0px 0px;
        }
		
		.not-set {
			opacity:0.4;
		}

        .typography-header {
            padding-left: 48px;
            padding-top: 24px;
            padding-bottom: 16px;
        }

        #typography {
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0em;
            text-align: left;
            color: black;
        }

        #typography span {
            color: #919499;
            text-transform: uppercase;
            line-height: 19px;
        }

        .typography-row {
            padding-left: 48px;
            padding-bottom: 16px;
        }

        .typography-col-1{
            display: inline-block;
        }

        .typography-col-2{
            display: inline-block;
            position: absolute;
            left: 256px;
        }

        dt {
            border-bottom: 1px solid #DBDEE6;
            padding-bottom: 16px;
        }
    </style>
</head>

<div id="main-holder" class="container_16">
    <div id="backgrondcolors">
		<div class="color-section">Background colors</div>
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-holder-1" style="background-color:#218380">
            </div>
			<div class="color-text">
				<p>#218380</p>
			</div>
        </div>

        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-holder-2" style="background-color:#ffffff">
            </div>
			<div class="color-text">
				<p>#ffffff</p>
			</div>
        </div>

        
        
    </div>

    <div id="textcolors">
		<div class="color-section">Text colors</div>
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-1" style="background-color:#000000">
            </div>
            <p>#000000</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-2" style="background-color:#ffffff">
            </div>
            <p>#ffffff</p>
        </div>
        
        
    </div>
    <div id="typography">
        <div class="typeclass">
            
            
            <dt id="result-header-h1-dt" class="not-set first">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 1</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h2-dt" class=" ">
            <div class="typography-header">
                <div style="font-family:Verdana; font-style:normal; font-size:24px; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 2</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>Verdana</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>24px</div><div class="typography-col-2"><span>Font Style</span><br>normal</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>normal</div><div class="typography-col-2"><span>Color</span><br>#000000</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h3-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 3</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h4-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 4</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h5-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 5</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h6-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 6</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            

            
            <dt id="result-header-h7-dt" class=" ">
            <div class="typography-header">
                <div style="font-family:Verdana; font-style:normal; font-size:16px; line-height:; color:; background-color:transparent;margin-left: 0px;">Body</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>Verdana</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>16px</div><div class="typography-col-2"><span>Font Style</span><br>normal</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>normal</div><div class="typography-col-2"><span>Color</span><br>#000000</div></div>      
            </div>
            </dt>
        </div>
    </div>
</div>

<p>Overall, the code can be improved by implementing best practices such as using semantic HTML tags, adding accessibility features, optimizing assets, and considering the use of preprocessors and build tools. Additionally, it would be beneficial to follow a consistent coding style and structure for better readability and maintainability.</p>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <title>Codedamn - Quiz Project</title>
</head>

<body>
    <header>
        <a id=leaderboard>View Highscores <i class="fas fa-hand-point-left fa-lg"></i>
        </i></a> 

    </header>
    <main>
        <h1>Hello World!</h1>
    </main>
    <script src="assets/script.js"></script>
</body>

</html>

<p>The code can be improved by using more descriptive variable names, adding comments to explain complex logic, and using a loop to generate HTML for displaying questions and options. Additionally, removing numbers from the options array and using strict equality when checking answers can improve accuracy. Overall, these changes can make the code more readable, maintainable and accurate.</p>

const questions = [
  {
    questionText: "Commonly used data types DO NOT include:",
    options: ["1. strings", "2. booleans", "3. alerts", "4. numbers"],
    answer: "3. alerts",
  },
  {
    questionText: "Arrays in JavaScript can be used to store ______.",
    options: [
      "1. numbers and strings",
      "2. other arrays",
      "3. booleans",
      "4. all of the above",
    ],
    answer: "4. all of the above",
  },
  {
    questionText:
      "String values must be enclosed within _____ when being assigned to variables.",
    options: ["1. commas", "2. curly brackets", "3. quotes", "4. parentheses"],
    answer: "3. quotes",
  },
  {
    questionText:
      "A very useful tool used during development and debugging for printing content to the debugger is:",
    options: [
      "1. JavaScript",
      "2. terminal/bash",
      "3. for loops",
      "4. console.log",
    ],
    answer: "4. console.log",
  },
  {
    questionText:
      "Which of the following is a statement that can be used to terminate a loop, switch or label statement?",
    options: ["1. break", "2. stop", "3. halt", "4. exit"],
    answer: "1. break",
  },
];


An interactive & timed JavaScript quiz that stores a high scores in local storage.

Code Analysis

Submission details

No comments so far

Code Analysis

Analysis data

Submission details

No comments so far