Skip to content

Instantly share code, notes, and snippets.

View OthmanAdi's full-sized avatar
:octocat:
Building Softwares and Teaching humans how to code

CodingWithAdi OthmanAdi

:octocat:
Building Softwares and Teaching humans how to code
166 followers · 2 following
View GitHub Profile
@OthmanAdi
OthmanAdi / tailwindcss config
Created April 5, 2024 08:02
tailwindcss config
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
@OthmanAdi
OthmanAdi / pokemonFetch.js
Created April 3, 2024 01:32
// verwende die document.getELementById, um das eingabefeld und den Button zu finden. Denkt daran, die passenden ID's aus unserem HTML dokument zu verwenden
const pokemonInput = document.getElementById("pokemonInput");
const fetchBtn = document.getElementById("fetchPokemon");
// fugt das "document" objekt einen EventListener hinzu
// der EventListener muss mit DOMContentLoaded ausgelost werden
// Diese Listener soll aus das erignis DOMContentLoaded reagieren
document.addEventListener("DOMContentLoaded", () => {
fetchBtn.addEventListener('click', () => {
// gebe den Geschriebenen Pokemon namen aus dem Eingabefeld fur die function weiter
@OthmanAdi
OthmanAdi / page.tsx
Created April 1, 2024 06:18
// src/app/page.tsx
import { shopifyExtension, shopifyProduct } from "@/types";
import Image from "next/image";
import { gql } from "@/utils/gql";
type GraphQLResponse = {
data: {
products: {
@OthmanAdi
OthmanAdi / app.js
Created March 18, 2024 22:13
// Event Listener starting the request to fetch for pokemon the second the page is visited
document.addEventListener('DOMContentLoaded', () => {
const pokemonInput = document.getElementById('pokemonInput');
const fetchBtn = document.getElementById('fetchPokemon');
fetchBtn.addEventListener('click', () => {
fetchThePoke(pokemonInput.value);
})
})
@OthmanAdi
OthmanAdi / contact.html
Created March 18, 2024 12:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Including Bootstrap Support -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- End of Bootstrap Link -->
@OthmanAdi
OthmanAdi / app.js
Created March 18, 2024 12:09
emialjs
// Event Listener starting the request to fetch for pokemon the second the page is visited
document.addEventListener('DOMContentLoaded', () => {
const pokemonInput = document.getElementById('pokemonInput');
const fetchBtn = document.getElementById('fetchPokemon');
fetchBtn.addEventListener('click', () => {
fetchThePoke(pokemonInput.value)
})
})
@OthmanAdi
OthmanAdi / index.html
Created March 16, 2024 04:54
CC30 index.html day 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Including Bootstrap Support -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- End of Bootstrap Link -->
@OthmanAdi
OthmanAdi / app.js
Created March 16, 2024 04:53
complete JS of CC30 day 4
// Event Listener starting the request to fetch for pokemon the second the page is visited
document.addEventListener('DOMContentLoaded', () => {
const pokemonInput = document.getElementById('pokemonInput');
const fetchBtn = document.getElementById('fetchPokemon');
fetchBtn.addEventListener('click', () => {
fetchThePoke(pokemonInput.value)
})
})
@OthmanAdi
OthmanAdi / app.js
Created March 15, 2024 15:07
third chunk
// function to display the pokemon
function displayPokemon(pokemon) {
const display = document.getElementById('pokemon-display')
display.innerHTML = `
<div class = "text-center">
<img src = ${pokemon.sprites.front_default}>
<h3>${pokemon.name.toUpperCase()}</h3>
</div
`
}
@OthmanAdi
OthmanAdi / app.js
Created March 15, 2024 14:58
second chunk
function fetchThePoke(valueOfInputField) {
fetch(`https://pokeapi.co/api/v2/pokemon/${valueOfInputField.toLowerCase()}`)
.then(response => response.json())
.then(data => displayPokemon(data))
.catch(error => {
console.error('Pokemon Not Found:', error)
alert('Pokemon does not Exist!', error)
})
}