├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── index.html ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── Slides.js ├── azores.jpg ├── bali.jpg ├── ber.jpg ├── bora.jpg ├── cook.jpg ├── crete.jpg ├── data.js ├── index.css ├── index.js ├── islands.js ├── logo.svg ├── lucia.jpg ├── nz.jpg ├── reportWebVitals.js ├── setupTests.js ├── taz.jpg └── thew.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webpage built with React, CSS3, JSX. Responsive for all mobile devices. 2 | Array methods, slider. 3 | 4 | ## In the project directory, you can run: 5 | 6 | ## npm i 7 | ## npm start 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "islands", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 30 | Islands 31 | 32 | 33 | 34 |
35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | background-color: rgb(255, 246, 246) ; 4 | } 5 | .container{ 6 | margin-top: 10px; 7 | display: flex; 8 | justify-content: center; 9 | text-align: center; 10 | font-family: 'Poppins', sans-serif; 11 | } 12 | 13 | h1{ 14 | letter-spacing: 1px; 15 | text-shadow: #000 2px 2px; 16 | text-transform: uppercase; 17 | font-weight: bolder; 18 | } 19 | 20 | .btn{ 21 | border: none; 22 | color:#4b77bd; 23 | font-size: 18px; 24 | background-color: transparent; 25 | font-family: 'Poppins', sans-serif; 26 | } 27 | 28 | .btnDeleteAll{ 29 | background-color:#4b77bd; 30 | color:#fff; 31 | text-transform: uppercase; 32 | letter-spacing: 1px; 33 | padding: 15px; 34 | border: none; 35 | font-weight: bold; 36 | font-family: 'Poppins', sans-serif; 37 | } 38 | 39 | .btnDelete{ 40 | background-color:#FF9494; 41 | color:#fff; 42 | font-weight: bold; 43 | text-transform: uppercase; 44 | padding: 10px; 45 | border: none; 46 | margin: 10px; 47 | letter-spacing: 1px; 48 | font-family: 'Poppins', sans-serif; 49 | } 50 | 51 | .smallTitle{ 52 | color:#1C6758; 53 | text-shadow: #161616 2px 2px; 54 | text-transform: uppercase; 55 | letter-spacing: 1px; 56 | font-size: 30px; 57 | } 58 | 59 | .btnNexAndPrevious{ 60 | background-color:#FD841F; 61 | color:#fff; 62 | font-weight: bold; 63 | text-transform: uppercase; 64 | padding: 15px; 65 | width:max-content; 66 | border: none; 67 | margin: 10px; 68 | letter-spacing: 1px; 69 | font-family: 'Poppins', sans-serif; 70 | border-radius: 10px; 71 | } 72 | .btnNexAndPrevious:hover{ 73 | color:#FD841F; 74 | background-color:#fff; 75 | } 76 | 77 | .blueBackground { 78 | margin-top: 50px; 79 | background-color: #EEEEEE; 80 | } 81 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import {useState} from "react"; 2 | import { data } from "./data"; 3 | import './App.css'; 4 | import Slides from "./Slides"; 5 | 6 | function App() { 7 | 8 | const [islands, setIslands]=useState(data); 9 | const [showText, setShowText] = useState(false); 10 | 11 | const removeIsland=(id)=>{ 12 | let newIslands=islands.filter(island=> island.id !== id) 13 | setIslands(newIslands); 14 | } 15 | 16 | const showTextClick = (element)=> { 17 | element.showMore=!element.showMore 18 | setShowText(!showText) 19 | } 20 | 21 | return ( 22 |
23 | 24 |
25 |

Top {islands.length} most beautiful islands.

26 |
27 | {islands.map((element=>{ 28 | const {id, image, name, description, showMore}= element; 29 | return( 30 |
31 | 32 |
33 | foto 34 |
35 | 36 |
37 |

{id}- {name}

38 |
39 | 40 |
41 |

{ showMore ? description : description.substring(0, 200)} 42 | 43 |

44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 | ) 52 | } 53 | 54 | ))} 55 | 56 |
57 | 58 |
59 | 60 |
61 |
62 |

Just take a look and relax

63 |
64 |
65 | 66 |
67 |
68 | 69 |
70 | ); 71 | 72 | } 73 | 74 | export default App; 75 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Slides.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { islands } from "./islands"; 3 | import './App.css'; 4 | 5 | function Slides(){ 6 | const [foto, setFoto]= useState(0); 7 | const {image}= islands[foto]; 8 | 9 | const previousIsland=()=>{ 10 | setFoto((foto=>{ 11 | foto --; 12 | if (foto<0){ 13 | return islands.length-1 14 | } 15 | return foto 16 | })) 17 | } 18 | 19 | const nextIsland =()=>{ 20 | setFoto((foto=>{ 21 | foto++; 22 | if(foto>islands.length-1){ 23 | foto=0; 24 | } 25 | return foto; 26 | })) 27 | } 28 | return(
29 |
30 | foto 31 |
32 |
33 | 34 | 35 |
36 | 37 |
) 38 | } 39 | 40 | export default Slides; 41 | -------------------------------------------------------------------------------- /src/azores.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/azores.jpg -------------------------------------------------------------------------------- /src/bali.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/bali.jpg -------------------------------------------------------------------------------- /src/ber.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/ber.jpg -------------------------------------------------------------------------------- /src/bora.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/bora.jpg -------------------------------------------------------------------------------- /src/cook.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/cook.jpg -------------------------------------------------------------------------------- /src/crete.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/crete.jpg -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | import azores from './azores.jpg'; 2 | import bora from './bora.jpg'; 3 | import crete from './crete.jpg'; 4 | import lucia from './lucia.jpg'; 5 | import nz from './nz.jpg'; 6 | import ber from './ber.jpg'; 7 | import thew from './thew.jpg'; 8 | import cook from './cook.jpg'; 9 | import taz from './taz.jpg'; 10 | import bali from './bali.jpg'; 11 | 12 | export const data= [ 13 | 14 | { 15 | id: 1, 16 | image: azores, 17 | name: "Azores", 18 | description: "The Azores are a magical archipelago in the mid-Atlantic and part of Portugal. Dramatic landscapes filled with massive cliffs emerging from hypnotizing waters, endless hedgerows of blue hydrangea, an abundance of wildlife, and beautiful waterfalls, this secluded stretch of islands is a must-visit.", 19 | showMore: false, 20 | }, 21 | 22 | { 23 | id: 2, 24 | image: bora, 25 | name: "Bora Bora", 26 | description: "Out of all the incredible islands that comprise French Polynesia, Bora Bora is the crown jewel. Just northwest of Tahiti, the island feels utterly remote while being easily accessible for the honeymoon, anniversary, or celebratory trip of dreams. Surrounded by a coral reef-protected lagoon, Bora Bora is a popular destination for scuba divers and snorkelers alike, and it boasts an array of world-class luxury resort properties." , 27 | showMore: false, 28 | }, 29 | 30 | { 31 | id: 3, 32 | image: crete, 33 | name: "Crete", 34 | description: "Thanks to Greek mythology, Crete has been immortalized as a mystical island that was the birthplace of King Zeus. Besides history and folklore, Crete offers some of the world's most swoon-worthy beaches and views of the Aegean." , 35 | showMore: false, 36 | }, 37 | 38 | { 39 | id: 4, 40 | image: lucia, 41 | name: "St. Lucia", 42 | description: "This glorious island in the Eastern Caribbean might surprise first-time visitors by how much it resembles a Hawaiian island. This charming destination features an abundance of terrain, from the aptly named, iconic Sugar Beach to the stunning Piton volcanic mountains. Visitors can always expect thoughtful hospitality, a taste of the French-inspired Caribbean culture, and mystical views.", 43 | showMore: false, 44 | }, 45 | 46 | { 47 | id: 5, 48 | image: nz , 49 | name: "New Zealand" , 50 | description: "This magical island-country is full of fantastical changes in terrain, folklore-ish caves and coves, and breathtaking beaches. One of the most popular sights is Milford Sound, shown here, which is a magnificent fjord home to rainforests, waterfalls, black coral, and fascinating aquatic life (think: penguins).", 51 | showMore: false, 52 | }, 53 | 54 | { 55 | id: 6, 56 | image: ber, 57 | name: "Bermuda", 58 | description:"Known for its pink-sand beaches, friendly culture, and obsession with rum, Bermuda is as vibrant as it is beautiful. This British territory lies in the Northern Atlantic and offers iconic beaches, plenty of natural wonders to explore, and breathtaking waters." , 59 | showMore: false, 60 | }, 61 | 62 | { 63 | id: 7, 64 | image: thew , 65 | name: "The Whitsundays", 66 | description: "The Whitsundays lie right off Queensland in the heart of the Great Barrier Reef, so prepare for strapping on that snorkel or scuba gear upon arrival. Home to 74 island wonders, this region of Australia is home to some of the world's best beaches, like Whitehaven Beach.", 67 | showMore: false, 68 | }, 69 | 70 | { 71 | id: 8, 72 | image:cook , 73 | name: "Cook Islands", 74 | description: "This South Pacific nation consists of 15 islands and is politically tied to New Zealand. This year-round paradise offers sweeping stretches of coconut palms (no hotels can be taller than them!), piercing blue waters, and spectacular marine life.", 75 | showMore: false, 76 | }, 77 | 78 | { 79 | id: 9, 80 | image: taz , 81 | name: "Tazmania" , 82 | description: "This island-state seated just below Australia is wild, rustic, and geographically diverse, as nearly 40 percent of the island is protected for national parks and national heritage wilderness. White sand beaches with sweeping ocean and mountain views are a hallmark of Tasmania, making it an ultimate destination for island getaways." , 83 | showMore: false, 84 | }, 85 | 86 | { 87 | id: 10, 88 | image: bali , 89 | name: "Bali", 90 | description: "Bali is the most popular of Indonesia's enchanting islands, thanks to its paradisal terrain, fascinating history and architecture, renowned wellness experiences, and, of course, some of the best stretches of beach in the world. Turquoise waters, bright white sands, and verdant rock formations make for an ideal place to surf, swim, and sunbathe." , 91 | showMore: false, 92 | } 93 | 94 | ] 95 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/islands.js: -------------------------------------------------------------------------------- 1 | export const islands = [ 2 | { 3 | id:1, 4 | image:" https://images.unsplash.com/photo-1590523741831-ab7e8b8f9c7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" 5 | }, 6 | { 7 | id:2, 8 | image:" https://images.unsplash.com/photo-1565113180093-077f1e8f1c74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" 9 | }, 10 | { 11 | id:3, 12 | image:" https://images.unsplash.com/photo-1518509562904-e7ef99cdcc86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" 13 | }, 14 | { 15 | id:4, 16 | image:" https://images.unsplash.com/photo-1437719417032-8595fd9e9dc6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" 17 | }, 18 | { 19 | id:5, 20 | image:"https://images.unsplash.com/photo-1551418988-c21e451467b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80 " 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lucia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/lucia.jpg -------------------------------------------------------------------------------- /src/nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/nz.jpg -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/taz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/taz.jpg -------------------------------------------------------------------------------- /src/thew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/texts-and-slides/5f6bd2e2c05d6080ab928a4ae12ca570e386fe1c/src/thew.jpg --------------------------------------------------------------------------------