Axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti “Individual loyiha” ishi

Foydalangan adabiyotlar ro’yxati
• Building JavaScript Games for Phones, Tablets, and Desktop by Arjan Egges
• Functional Programming in JavaScript by Luis Atencio
• High-Performance JavaScript: Build Faster Web Application Interfaces by Nicholas C. Zakas
• JavaScript & jQuery: The Missing Manual by David Sawyer McFarland
• JavaScript Enlightenment by Cody Lindley
• Maintainable JavaScript: Writing Readable Code by Nicholas C. Zakas
• Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications, and libraries by Stoyan Stefanov
• Professional JavaScript for Web Developers by Nicholas C. Zakas
• Secrets of the JavaScript Ninja by Bear Bibeault and John Resig
• Testable JavaScript: Ensuring Reliable Code by Mark Ethan Trostler
• The Principles of Object-Oriented JavaScript by Nicholas C. Zaka

Foydalanilgan web saytlar ro’yxati

1.https://reactjs.org/docs/getting-started.html

2.https://www.w3schools.com/
Ilova::
DASTUR kodi:
Indexjs dagi kodlar:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(

,
document.getElementById("root")
);

App.js dagi kodlar.

import Header from "./components/Header";
import Calendar from "./components/Calendar";
import CalendarState from "./context/CalendarContext";
import TaskForm from "./components/TaskForm";

function App() {

return (

);
}

export default App;

Calendar.js dagi kodlar.
import React, { useContext, useEffect } from "react";
import { CalendarContext } from "../context/CalendarContext";
import Day from "./Day";

function Calendar() {

const { date, days, setDate } = useContext(CalendarContext);

useEffect(() => {

setDate(new Date());
// eslint-disable-next-line
}, []);

if (days.length < 1) return null;

const names = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

return (

{names.map(name =>

{name}

)}

{days.map(day =>

)}

);
}

export default Calendar;

Day.js dagi kodlar.

import React, { useContext } from 'react';
import { CalendarContext, sameDay } from '../context/CalendarContext';
import { contrast } from '../utils/utils';
import Task from './Task';

function Day({day, date}) {

const {setTask, setDate} = useContext(CalendarContext);

const getStyle = (color)=> {

return { background: color, color: contrast(color)};
}
const selected = sameDay(day.date, date);
const style = (day.date.getMonth() !== date.getMonth() ? ' disabled':'')
+ (sameDay(day.date, new Date()) ? ' current-day':'')
+ (selected ? ' selected-day':'')
return (

setDate(day.date)}>

{day.tasks.map(task=>(

))}