React.js – Тема 2 – Результат – Courses WebSkill

Слідкуйте за нами:

Facebook Instagram Youtube

Тема 2. React.js Quiz, Temperature App's

Quiz App
Temperature App
Теми по React.js
Готовий код

Створення Quiz React.js проєкту

Створення Quiz React.js проєкту, введення команд в консоль

D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку

npx create-react-app  quiz-app - створення нового React.js проєкту

npx create-react-app - сама команда створення

quiz-app - назва папки в якій буде проєкт

cd quiz-app - переходимо в створену папку

Форматування і підготовка

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли:
setupTests.js
reportWebVitals.js
logo.svg
index.css
App.test.js

З файлу index.js видаляємо такі рядки
import './index.css';
import reportWebVitals from './reportWebVitals';
reportWebVitals();
Та коментарі:
// If you want...

З файлу App.js видаляємо
import logo from './logo.svg';
Тег <img> i <p>

Створення папки components та файлів в ній

В папці src створюємо такі файли js:
Quiz.js
question.js

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Подивитись стилізацію App.css
Стилізація App.css

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
font-family: "Verdana", cursive, sans-serif;
color: #ffffff;
}

body {
background-color: #7cc6fe;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.app {
background-color: #252d4a;
width: 450px;
min-height: 200px;
height: min-content;
border-radius: 15px;
padding: 20px;
box-shadow: 10px 10px 42px 0px rgba(0, 0, 0, 0.75);
display: flex;
justify-content: space-evenly;
}

.score-section {
display: flex;
font-size: 24px;
align-items: center;
}

/* QUESTION/TIMER/LEFT SECTION */
.question-section {
width: 100%;
position: relative;
}

.question-count {
margin-bottom: 20px;
}

.question-count span {
font-size: 28px;
}

.question-text {
margin-bottom: 12px;
}

.timer-text {
background: rgb(230, 153, 12);
padding: 15px;
margin-top: 20px;
margin-right: 20px;
border: 5px solid rgb(255, 189, 67);
border-radius: 15px;
text-align: center;
}

/* ANSWERS/RIGHT SECTION */
.answer-section {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

button {
width: 100%;
font-size: 16px;
color: #ffffff;
background-color: #252d4a;
border-radius: 15px;
display: flex;
padding: 5px;
justify-content: flex-start;
align-items: center;
border: 5px solid #234668;
cursor: pointer;
}

.correct {
background-color: #2f922f;
}

.incorrect {
background-color: #ff3333;
}

button:hover {
background-color: #555e7d;
}

button:focus {
outline: none;
}

button svg {
margin-right: 5px;
}

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Заготовки файлів для додатку

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
import React from 'react';
import './App.css';

function App() {
  return (
    <div className='app'>

    </div>
  );
}
export default App;
import React, { useState } from 'react';
const Quiz = ({ questions }) => {
  return (
    <div className='app'>
     
    </div>
  );
};
export default Quiz;
const questions = [
    {
      questionText: '...?',
      answerOptions: [
        { answerText: '...', isCorrect: false },
        { answerText: '...', isCorrect: true },
      ],
    },
  ];
export default questions;

Скріншоти усіх файлів в нашому додатку

Створення Temperature React.js проєкту

Створення Temperature Control React.js проєкту, введення команд в консоль

D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку

npx create-react-app temperature-controller - створення нового React.js проєкту

npx create-react-app - сама команда створення

temperature-controller - назва папки в якій буде проєкт

cd temperature-controller - переходимо в створену папку

Форматування і підготовка

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли:
setupTests.js
reportWebVitals.js
logo.svg
index.css
App.test.js

З файлу index.js видаляємо такі рядки
import './index.css';
import reportWebVitals from './reportWebVitals';
reportWebVitals();
Та коментарі:
// If you want...

З файлу App.js видаляємо
import logo from './logo.svg';
Тег <img> i <p>

Створення папки components та файлів в ній

В папці src залишаємо лише такі файли:
App.js
App.css
index.js

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Подивитись стилізацію App.css
Стилізація App.css
body {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
.app-container {
  height: 400px;
  width: 300px;
  background: #2b5870;
  border-radius: 20px;
  box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.75);
}
.temperature-display-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
}
.temperature-display {
  display: flex;
  border-radius: 50%;
  color: #ffffff;
  height: 220px;
  width: 220px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  border: 3px #ffffff solid;
  transition: background 0.5s;
}
button {
  border-radius: 100px;
  height: 80px;
  width: 80px;
  font-size: 32px;
  color: #ffffff;
  background: rgb(105, 104, 104);
  border: 2px #ffffff solid;
}
button:hover {
  background: rgb(184, 184, 184);
  cursor: pointer;
}
button:focus {
  outline: 0;
}
.button-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.neutral {
  background: rgb(184, 184, 184);
}
.cold {
  background: #035aa6;
}
.hot {
  background: #ff5200;
}

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Заготовки файлів для додатку

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
import React, { useState } from "react";
import './App.css';
 
function App() {
  return (
    <div className='app'>
 
    </div>
  );
}
export default App;

Скріншоти усіх файлів в нашому додатку

Посилання на Тему 9. Введення в React.js з попереднього курсу

Відкрити Тему 9

Посилання на Тему 1. Створення React.js, проєкт ToDoList

Відкрити Тему 1

Вміст кожного із файлів Quiz App

Файл index.js
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Файл App.js
App.js
import React from 'react'; // Імпортуємо бібліотеку React, яка необхідна для створення React-компонентів.
import './App.css'; // Імпортуємо CSS-файл для оформлення стилів додатку.
import Quiz from './Quiz'; // Імпортуємо компонент Quiz та масив питань (questions) з відповідних файлів.
import questions from './questions';

// Визначаємо основний компонент App. Це кореневий компонент вашого React-додатку.
function App() {
  // Повертаємо компонент App.
  return (
    <div className='app'>
      {/* Рендеримо компонент Quiz та передаємо масив питань як властивість (prop). */}
      <Quiz questions={questions} />
    </div>
  );
}

// Експортуємо компонент App, щоб його можна було використовувати в інших частинах додатку.
export default App;
Файл Quiz.js
Quiz.js
// Імпортуємо бібліотеки React та useState для створення функціонального компонента та управління станом.
import React, { useState } from 'react';

// Оголошуємо функціональний компонент Quiz та передаємо властивість (prop) questions.
const Quiz = ({ questions }) => {
  // Використовуємо useState для створення змінних стану для поточного питання, відображення результатів та рахунку балів.
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [showScore, setShowScore] = useState(false);
  const [score, setScore] = useState(0);

  // Функція handleAnswerOptionClick викликається при натисканні на відповідь на питання.
  const handleAnswerOptionClick = (isCorrect) => {
    // Якщо відповідь правильна, збільшуємо рахунок балів.
    if (isCorrect) {
      setScore(score + 1);
    }

    // Перевіряємо, чи є ще наступне питання.
    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < questions.length) {
      // Якщо є, переключаємося на наступне питання.
      setCurrentQuestion(nextQuestion);
    } else {
      // Якщо питання закінчилися, відображаємо результати.
      setShowScore(true);
    }
  };

  // Рендеримо компонент Quiz, який містить питання, відповіді та результати.
  return (
    <div className='app'>
      {showScore ? (
        // Якщо showScore === true, відображаємо результати тесту.
        <div className='score-section'>
          Ви набрали {score} бали з {questions.length}
        </div>
      ) : (
        // Інакше відображаємо питання та варіанти відповідей.
        <>
          <div className='question-section'>
            <div className='question-count'>
              <span>Питання {currentQuestion + 1}</span>/{questions.length}
            </div>
            <div className='question-text'>{questions[currentQuestion].questionText}</div>
          </div>
          <div className='answer-section'>
            {questions[currentQuestion].answerOptions.map((answerOption) => (
              // Для кожної відповіді створюємо кнопку з можливістю обробки кліку.
              <button onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>
                {answerOption.answerText}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
};

// Експортуємо компонент Quiz для його використання в інших частинах додатку.
export default Quiz;
Файл question.js
question.js
// Оголошуємо масив питань (questions), який містить інформацію про різні питання для тесту.
const questions = [
    {
      questionText: 'Яка столиця Франції?',
      answerOptions: [
        { answerText: 'Нью-Йорк', isCorrect: false },
        { answerText: 'Лондон', isCorrect: false },
        { answerText: 'Париж', isCorrect: true },
        { answerText: 'Дублін', isCorrect: false },
      ],
    },
    {
      questionText: 'Хто є Генеральним директором компанії Tesla?',
      answerOptions: [
        { answerText: 'Джефф Безос', isCorrect: false },
        { answerText: 'Ілон Маск', isCorrect: true },
        { answerText: 'Білл Гейтс', isCorrect: false },
        { answerText: 'Тоні Старк', isCorrect: false },
      ],
    },
    {
      questionText: 'Компанія Apple створила який пристрій?',
      answerOptions: [
        { answerText: 'iPhone', isCorrect: true },
        { answerText: 'Intel', isCorrect: false },
        { answerText: 'Amazon', isCorrect: false },
        { answerText: 'Microsoft', isCorrect: false },
      ],
    },
    {
      questionText: 'Скільки книг про Гаррі Поттера існує?',
      answerOptions: [
        { answerText: '1', isCorrect: false },
        { answerText: '4', isCorrect: false },
        { answerText: '6', isCorrect: false },
        { answerText: '7', isCorrect: true },
      ],
    },
  ];
  // Експортуємо масив питань, щоб його можна було використовувати в інших частинах додатку.
  export default questions;

Вміст кожного із файлів Temperature App

Файл index.js
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Файл App.js
App.js
// Імпортуємо бібліотеки React та useState для створення функціонального компонента та управління станом.
import React, { useState } from "react";
import './App.css'; // Імпортуємо CSS-стилі для оформлення додатку.

const App = () => { // Оголошуємо функціональний компонент App.
  // Встановлюємо початкове значення температури (temperatureValue) на 10 градусів та колір (temperatureColor) на "cold".
  const [temperatureValue, setTemperatureValue] = useState(10);
  const [temperatureColor, setTemperatureColor] = useState("cold");

  // Функція increaseTemperature збільшує температуру на 1 градус, але не більше 30 градусів. Змінює колір на "hot", якщо температура перевищує 15 градусів.
  const increaseTemperature = () => {
    if (temperatureValue === 30) return;

    const newTemperature = temperatureValue + 1;

    setTemperatureValue(newTemperature);
    if (newTemperature >= 15) {
      setTemperatureColor("hot");
    }
  };

  // Функція decreaseTemperature зменшує температуру на 1 градус, але не менше 0 градусів. Змінює колір на "cold", якщо температура менше 20 градусів.
  const decreaseTemperature = () => {
    if (temperatureValue === 0) return;

    const newTemperature = temperatureValue - 1;
    setTemperatureValue(newTemperature);
    if (newTemperature < 20) {
      setTemperatureColor("cold");
    }
  };

  // Рендеримо компонент App, який відображає температуру та кнопки для її зміни.
  return (
    <div className="app-container">
      <div className="temperature-display-container">
        <div className={`temperature-display ${temperatureColor}`}>
          {temperatureValue}°C
        </div>
      </div>
      <div className="button-container">
        <button onMouseDown={increaseTemperature}>+</button>
        <button onClick={decreaseTemperature}>-</button>
      </div>
    </div>
  );
};

// Експортуємо компонент App, щоб його можна було використовувати в інших частинах додатку.
export default App;
Copyright © 2023 Courses WebSkill | Powered by WebSkill
Scroll to Top