End.js

import React from 'react'
// import tr from './End-Image01.jpg';
// import './End.css'
import  'bootstrap'
import 'bootstrap/dist/css/bootstrap.css';
// import { Link } from 'react-router-dom';

function End() {
    let a = []
    for (let i = 0; i < 3; i++) {

        if (localStorage.getItem('답' + (i + 1)) === localStorage.getItem('정답' + (i + 1))) {

            a[i] = 1


            localStorage.setItem('채점' + (i + 1), 'O')

        }
        else {

            a[i] = 0

            localStorage.setItem('채점' + (i + 1), 'X')
        }
    }

    return (
        <>

            <div className="container">
                <h2 style={{ fontSize: '40px', textAlign: 'center'}}>채점표</h2>
                <table className="table table-bordered" >
                    <thead>
                        <tr>
                            <th>이름</th>
                            <th>{localStorage.getItem('name')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1번</td>
                            <td> {localStorage.getItem('채점1')}</td>

                        </tr>
                        <tr>
                            <td>2번</td>
                            <td>{localStorage.getItem('채점2')}</td>
                        </tr>
                        <tr>
                            <td>3번</td>
                            <td> {localStorage.getItem('채점3')}</td>
                        </tr>
                        <tr>
                            <td>총점</td>
                            <td>{a[0] + a[1] + a[2]}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {/* <div className="card" >
                <div className='card-body'>
                    <h1 className='card-title'>-채점표-</h1>
                    <h3 className='card-subtitle'>이름 : {localStorage.getItem('name')}</h3>

                    <p className='card-text'>Quiz 1 : {localStorage.getItem('채점1')}</p>
                    <p className='card-text'>Quiz 2 : {localStorage.getItem('채점2')}</p>
                    <p className='card-text'>Quiz 3 : {localStorage.getItem('채점3')}</p>
                    <p className='card-text'>Total Score : {a[0] + a[1] + a[2]}</p>
                </div>
                <div className="card2">
                    <div className='card-body2'>
                        <h3 className='card-title2'>결과</h3>
                        <p className='card-text2'>합격인지 아닌지 써주자</p>
                    </div>
                </div> */}

            {/* <div >
                    <img src={tr} alt="수고" class="card" className="Box-text-center" />
       
                </div> */}
        </>

    )
}

export default End;