syncing

2 years ago · f147323b04
16 changed files with 118 additions and 9 deletions
--- a/100-days/full-week.html
+++ b/100-days/full-week.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>My Upcoming Challenges</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link href="styles/shared.css" rel="stylesheet" />
+    <link href="styles/full-week.css" rel="stylesheet" />
+  </head>
+  <body>
+    <h1>My Upcoming Challenges</h1>
+    <a href="index.html">View Today's Challenge</a>
+    <p>Repeat what I learned about HTML & CSS</p>
+    <p>Do the exercises on HTML & CSS</p>
+    <p>Dive deeper into HTML & CSS and build more complex websites</p>
+  </body>
+</html>
--- a/100-days/images/challenges-trophy.jpg
+++ b/100-days/images/challenges-trophy.jpg
--- a/100-days/index.html
+++ b/100-days/index.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link href="styles/shared.css" rel="stylesheet" />
+    <link href="styles/daily-challenge.css" rel="stylesheet" />
+    <title>My Daily Challenge</title>    
+</head>
+<body>   
+    <img src="images/challenges-trophy.jpg" alt="A trophy" />
+    <h1>Max' Challenge for Wednesday, August 4th</h1>
+    <p id="todays-challenge">
+      Learn about the basics of web development - specifically dive into HTML &
+      CSS.
+    </p>
+    <p>Explore the <a href="full-week.html">full week</a>.</p>
+</body>
+</html>
--- a/100-days/styles/daily-challenge.css
+++ b/100-days/styles/daily-challenge.css
@ -0,0 +1,15 @@
+body {
+    margin: 50px;
+  }
+  
+  img {
+    width: 200px;
+    height: 200px;
+    border-radius: 100px;
+  }
+  
+  #todays-challenge {
+    color: rgb(170, 96, 83);
+    font-weight: bold;
+    font-size: 52px;
+  }
--- a/100-days/styles/full-week.css
+++ b/100-days/styles/full-week.css
--- a/100-days/styles/shared.css
+++ b/100-days/styles/shared.css
@ -0,0 +1,23 @@
+body {
+    background-color: rgb(233, 215, 207);
+    text-align: center;
+    color: rgb(83, 75, 75);
+  }
+  
+  h1 {
+    font-family: 'Oswald', sans-serif;
+  }
+  
+  p {
+    font-family: 'Fira Sans', sans-serif;
+  }
+  
+  a {
+    font-family: 'Fira Sans', sans-serif;
+    text-decoration: none;
+    color: rgb(167, 1, 78);
+  }
+  
+  a:hover {
+    text-decoration: underline;
+  }
--- a/getting-started/form.php
+++ b/getting-started/form.php
@ -0,0 +1,13 @@
+<?php
+    if(isset($_POST['searchterm']))
+    {
+        echo htmlspecialchars($_POST['searchterm'], ENT_QUOTES);
+    }
+?>
+
+<form action="" method="post">
+    User name: <input type="text" name="name"><br>
+    Password: <input type="password" name="password"><br>
+
+    <input type="submit" value="Search">
+</form>
--- a/react-complete-guide/src/App.js
+++ b/react-complete-guide/src/App.js
@ -1,4 +1,4 @@
-import Expenses from "./components/Expenses";
+import Expenses from "./components/Expenses/Expenses";

 function App() {
  const expenses = [
--- a/react-complete-guide/src/components/Expenses/ExpenseDate.css
+++ b/react-complete-guide/src/components/Expenses/ExpenseDate.css
--- a/react-complete-guide/src/components/Expenses/ExpenseDate.js
+++ b/react-complete-guide/src/components/Expenses/ExpenseDate.js
--- a/react-complete-guide/src/components/Expenses/ExpenseItem.css
+++ b/react-complete-guide/src/components/Expenses/ExpenseItem.css
@ -2,10 +2,8 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 0.5rem;
    margin: 1rem 0;
-    border-radius: 12px;
    background-color: #4b4b4b;
  }
  
--- a/react-complete-guide/src/components/Expenses/ExpenseItem.js
+++ b/react-complete-guide/src/components/Expenses/ExpenseItem.js
@ -1,4 +1,6 @@
 import ExpenseDate from './ExpenseDate';
+import Card from '../UI/Card';
+
 import './ExpenseItem.css';

 function ExpenseItem(props) {
@ -7,13 +9,13 @@ function ExpenseItem(props) {
    const expenseAmount = 294.67;*/

    return (
-        <div className="expense-item">
+        <Card className="expense-item">
            <ExpenseDate date={props.date} />
            <div className="expense-item__description">
                <h2>{props.title}</h2>
                <div className="expense-item__price">${props.amount}</div>
            </div>
-        </div>
+        </Card>
    );
 }

--- a/react-complete-guide/src/components/Expenses/Expenses.css
+++ b/react-complete-guide/src/components/Expenses/Expenses.css
@ -4,6 +4,4 @@
    margin: 2rem auto;
    width: 50rem;
    max-width: 95%;
-    border-radius: 12px;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  }
--- a/react-complete-guide/src/components/Expenses/Expenses.js
+++ b/react-complete-guide/src/components/Expenses/Expenses.js
@ -1,9 +1,10 @@
 import ExpenseItem from "./ExpenseItem";
+import Card from "../UI/Card";
 import "./Expenses.css";

 function Expenses(props) {
  return (
-    <div className="expenses">
+    <Card className="expenses">
      <ExpenseItem
        title={props.items[0].title}
        amount={props.items[0].amount}
@ -24,7 +25,7 @@ function Expenses(props) {
        amount={props.items[3].amount}
        date={props.items[3].date}
      ></ExpenseItem>
-    </div>
+    </Card>
  );
 }

--- a/react-complete-guide/src/components/UI/Card.css
+++ b/react-complete-guide/src/components/UI/Card.css
@ -0,0 +1,4 @@
+.card {
+    border-radius: 12px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
+}
--- a/react-complete-guide/src/components/UI/Card.js
+++ b/react-complete-guide/src/components/UI/Card.js
@ -0,0 +1,9 @@
+import './Card.css';
+
+function Card(props) {
+    const classes = 'card ' + props.className;
+
+    return <div className={classes}>{props.children}</div>
+}
+
+export default Card;