End.js

import React from 'react'
import tr from './img_end.jpg';


// import { Link } from 'react-router-dom';

function End() {
    let Scores = []
    let Score = 0
    JSON.parse(localStorage.getItem('Answers'))
    for (let i = 0; i < 3; i++) {

        if (JSON.parse(localStorage.getItem('Answers'))[i] === JSON.parse(localStorage.getItem('Solutions'))[i]) {

            Scores[i] = 1

        }
        else {

            Scores[i] = 0
        }
        Score += Scores[i]
    }

    return (
        <>
            <div className="card" style={{ fontSize: '30px', textAlign: "center" }} >
                <div className='card-header'>
                    -채점표-
                <div className='card-body'>
                        <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>

                        {Scores.map(score => {
                            for (let i = 0; i < 3; i++) {
                                if (score === 1) {
                                    return <p className='card-text'>Quiz {(i + 1)} : 'O' </p>
                                }
                                else { return <p className='card-text'>Quiz {(i + 1)} : 'X' </p> }

                            }

                        })}
                        <p className='card-text'>Total Score : {Score}</p>
                    </div>
                    <div style={{ marginTop: '100px' }} className="Box text-center">
                        <img src={tr} alt="수고" />

                    </div>
                </div>
            </div>
        </>

    )
}

export default End;