Quest: Rect-owy komponent

Postaw projekt za pomocą Vite. Usuń zbędny kod i wklej mój. Na początku przydadzą się polecenia:

Stawianie projektu >>> npm create vite@latest
Uruchamianie projektu >>> npm run dev

App.jsx

import Box from "./components/Box";

function App() {
  return (
    <>
      <Box borderColor="#2b6cb0" text="Przykładowy tekst" />
      <Box borderColor="#2b0" text="Inny tekst" />
      <Box borderColor="#b06b2b" text="Zwykły tekst" />
      <Box borderColor="#c52663" text="Jeszcze inny tekst" />
    </>
  )
}

export default App

components/Box.jsx

import React from "react";
import "./Box.css";

// Komponent strzałkowy; '=>' oznacza funkcję anonimową przypisaną do stałej
const Box = ({ borderColor, text }) => {
  return (
    // Podwójne nawiasy {{ }} to przekazanie obiektu JavaScript jako stylu inline
    <div className="box-container" style={{ borderColor }}>
      "{text}" <br />ma {text.length} znaków
    </div>
  );
};

export default Box;

components/Box.css

.box-container {
  width: 17%;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid; 
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-align: center;
  margin: 3px;
  float: left;
}

.box-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 0.25rem;
}

@media (max-width: 480px) {
  .box-container {
    min-height: 40px;
    font-size: 0.875rem;
  }
}

Powinno wyglądać mniej więcej tak:

Dopisz własny komponent który robi coś podobnego (albo coś niepodobnego)

Strony: 1 2

INF.03.drill.10 – MySQL + PHP

Dokończ zadanie INF.03-03-24.06-SG
Wszystkie pliki i częściowe rozwiązanie jest tu
Utrudnienie: w skrypcie połączenia z bazą użyłem obiektowej składni – innej niż w podpowiedziach do zadania dostępnej w arkuszu. Nie musisz jej używać.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poziomy rzek</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
			<section class="baner">
            <img src="obraz1.png" alt="Mapa Polski">
			</section>
        <section class="baner">
            <h1>Rzeki w wojewodztwie dolnośląskim</h1>
        </section>
    </header>
    <menu>
    W tym formularzu trochę popsułem !!!
    <form action="poziomRzek.php" method="post">
            <input type="radio" value="wszystkie">
            <label>Wszystkie</label>
            <input type="radio" value="Ponad stan ostrzegawczy">
            <label>Ponad stan ostrzegawczy</label>
            <input type="radio" value="Ponad stan alarmowy">
            <label>Ponad stan alarmowy</label>
            <input type="submit" value="Pokaż">
        </form>
    </menu>
    <main>
		<section id=lewy>
            <h3>Stany na dzień 2022-05-05</h3>
                <table>
	                <tr>
	                    <th>Wodomierz</th><th>Rzeka</th><th>ostrzegawczy</th>
	                    <th>Alarmowy</th><th>Aktualny</th>
	                </tr>
	
	                <?php
	                    if(isset($_POST['stan'])) {
	                        $stan = $_POST['stan'];
	                        if($stan == 'wszystkie') {
	                            $sql = "=====";
	                        }
	                        else if($stan == 'ostrzegawczy') {
	                            $sql = "=====";
	                        }

	                        $result = $conn->query(query: $sql);
	                        while($row = $result -> fetch_array()) {
	                            echo "<tr>";
	                                echo "<td>$row[0]</td>";
	                                echo "<td>$row[1]</td>";
	                                echo "<td>$row[2]</td>";
	                                echo "<td>$row[3]</td>";
	                            echo "</tr>";
	                        }
	                    }
	                ?>
	
	            </table>
				</section>
				<section id=prawy>
            <h3>Informacje</h3>
            <ul>
                <li>Brak ostrzeżeń o burzach z gradem</li>
                <li>Smog w mieście Wrocław</li>
                <li>Silny wiatr w Karkonoszach</li>
            </ul>
            <h3>Średnie stany wód</h3>
            :::::::::::::::::::::::
            <a href="https://komunikaty.pl">Dowiedz się więcej</a>
            <img src="obraz2.jpg" alt="rzeka">
				</section> <p></p>
    </main>
    <footer>
            <p>Stronę wykonał: 000000000000</p>
    </footer>
</body>
</html>

Quest: AI ready?

Technologie cyfrowe kształtują dziś sposób, w jaki uczymy się, komunikujemy i poszukujemy informacji. Potrzebujemy narzędzi, które pozwolą nam w pełni wykorzystać ich potencjał oraz ułatwią nam aktualizację naszej wiedzy.

Problem

Jak zdobywać wiarygodną i aktualna wiedzę na zrozumiałym dla mnie poziomie?
Jak filtrować i przetwarzać duże ilości informacji?

Rozwiązanie

AI, a konkretniej LLM-y i oparte na LLM-ach silniki wyszukiwania to nowe narzędzia bardzo przydatne w rozwijaniu swojej wiedzy i w rozwijaniu cyfrowej sprawczości. Nie możemy nie umieć ich używać!

Oto kilka kroków do opanowania AI

 

Strony: 1 2 3 4 5 6 7 8 9 10 11

Quest: MySQL – typy zapytań

Prompt: Jakie typu zapytań mysql wyróżniamy. Pokaż to zwięźle na przykładach w oparciu o jedną tabelę dwukolumnową.

Przykładowa tabela

users (id INT, name VARCHAR(100))

1) SELECT – pobieranie danych

SELECT * FROM users;
SELECT name FROM users WHERE id = 1;

2) INSERT – dodawanie danych

INSERT INTO users (id, name)
VALUES (1, 'Jan');

3) UPDATE – aktualizacja danych

UPDATE users
SET name = 'Jan Kowalski'
WHERE id = 1;

4) DELETE – usuwanie danych

DELETE FROM users
WHERE id = 1;

5) definicja struktury

CREATE

CREATE TABLE users (
  id INT PRIMARY KEY,
  name VARCHAR(100)
);

ALTER

ALTER TABLE users ADD COLUMN email VARCHAR(255);

DROP

DROP TABLE users;

Zadanie

  1. Dla tabeli z trzema kolumnami utwórz zapytania każdego typu w taki sposób, by wszystkie po kolei zadziałały sensownie w kolejności: create >> 3 * insert >> select >> alter >> insert >> select >> update >> select >> drop
  2. Zrób to samo zadanie dla dwóch tabel połączonych relacjami