Héla Ben Khalfallah helabenkhalfallah

🎯

Focusing

Hello! I'm Héla Ben Khalfallah. I'm a software engineer with a wealth of experience in web solutions, architecture, frontend, FrontendOps, and leadership.

80 followers · 38 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

helabenkhalfallah / FormExample.svelte

Created April 10, 2024 20:02

Svelte Form Example

	<!-- Script Section -->
	<script>
	// Import the necessary functions from Svelte
	import { createEventDispatcher } from 'svelte';

	// Create a dispatcher for emitting custom events
	const dispatch = createEventDispatcher();

	// Define variables to store form data and validation errors
	let username = '';

helabenkhalfallah / ApiReuse.svelte

Last active April 10, 2024 20:01

Using external Api

	<!-- Import the fetchData function from the api.js file -->
	<script>
	import { onMount } from 'svelte'; // Import the onMount function from Svelte
	import { fetchData } from './api'; // Import the fetchData function from the api.js file
	let responseData; // Declare a variable to store the fetched data
	// Make an HTTP GET request when the component mounts
	onMount(async () => {
	try {
	// Call the fetchData function to fetch data from the API
	responseData = await fetchData();

helabenkhalfallah / api.js

Created April 10, 2024 20:00

Reusing Api Declaration

	// api.js

	// Import the axios library for making HTTP requests
	import axios from 'axios';

	// Define an asynchronous function to fetch data from the API
	export async function fetchData() {
	try {
	// Make an HTTP GET request to fetch data from the API
	const response = await axios.get('https://api.example.com/data');

helabenkhalfallah / GetHttpService.svelte

Created April 10, 2024 19:58

Get HTTP Service

	<!-- This Svelte component fetches data from an API when it mounts and displays the response data or a loading message accordingly. -->

	<script>
	// Import the 'onMount' function from Svelte for executing code when the component mounts
	import { onMount } from 'svelte';
	// Import axios for making HTTP requests
	import axios from 'axios';
	// Declare a variable to store the response data
	let responseData;
	// Use the 'onMount' function to execute code when the component mounts

helabenkhalfallah / FakeComponent.css

Created April 10, 2024 19:56

Reusing Style

	.container {
	background-color: #f0f0f0;
	padding: 20px;
	}

	h1 {
	color: blue;
	}

helabenkhalfallah / FakeComponent.svelte

Created April 10, 2024 19:52

Component Structure

	<!-- Script Section -->
	<!-- Define a variable 'name' with the initial value 'World' -->
	<script>
	let name = 'World';
	</script>

	<!-- Markup Section -->
	<!-- Display a greeting message with the value of the 'name' variable -->
	<h1>Hello, {name}!</h1>

helabenkhalfallah / Pages.svelte

Created April 10, 2024 19:48

App Pages

	<!-- About.svelte -->
	<h1>About Us</h1>
	<p>This is the about page.</p>

	<!-- Home.svelte -->
	<script>
	export let name;
	</script>
	<h1>Hello {name}!</h1>

helabenkhalfallah / App.svelte

Last active April 10, 2024 19:30

Svelte App

	<!-- App.svelte -->

	<script>
	import { Router, Route } from 'svelte-routing';
	import Home from './routes/Home.svelte';
	import About from './routes/About.svelte';
	</script>

	<Router>
	<Route path="/" component={Home} />

helabenkhalfallah / index.js

Last active April 10, 2024 19:45

Svelte Index File

	import App from "./App.svelte";

	const app = new App({
	target: document.body
	});

	export default app;

helabenkhalfallah / index.html

Created April 10, 2024 19:02

Svelte Index

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf8" />
	<meta name="viewport" content="width=device-width" />

	<title>Svelte app</title>

	<link rel="stylesheet" href="public/bundle.css" />
	</head>

Newer Older