1598712000
Result types in C
This is macro-based implementation of Result types in C using tagged unions.
#c
What is GEEK
Buddha Community
1659063683
HTML, CSS & JavaScript Project: Build Cocktail App
In this tutorial, we will learn how to create a cocktail app with HTML, CSS and Javascript.
Create a cocktail app where the user can search a cocktail of choice and the app displays the ingredients and instructions to make the cocktail. We use 'The Cocktail DB' API to fetch information required for our app.
Project Folder Structure:
Before we start coding let us take look at the project folder structure. We create a project folder called – ‘Cocktail App’. Inside this folder, we have three files. These files are index.html, style.css and script.js.
HTML:
We start with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cocktail App</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="search-container">
<input
type="text"
placeholder="Type a cocktail name..."
id="user-inp"
value="margarita"
/>
<button id="search-btn">Search</button>
</div>
<div id="result"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>CSS:
Next, we style this app using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#5372f0 50%, #000000 50%);
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 90vw;
max-width: 37.5em;
background-color: #ffffff;
padding: 1.8em;
border-radius: 0.6em;
box-shadow: 0 1em 3em rgba(2, 9, 38, 0.25);
}
.search-container {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1em;
margin-bottom: 1.2em;
}
.search-container input {
font-size: 1em;
padding: 0.6em 0.3em;
border: none;
outline: none;
color: #1f194c;
border-bottom: 1.5px solid #1f194c;
}
.search-container input:focus {
border-color: #5372f0;
}
.search-container button {
font-size: 1em;
border-radius: 2em;
background-color: #5372f0;
border: none;
outline: none;
color: #ffffff;
cursor: pointer;
}
#result {
color: #575a7b;
line-height: 2em;
}
#result img {
display: block;
max-width: 12.5em;
margin: auto;
}
#result h2 {
font-size: 1.25em;
margin: 0.8em 0 1.6em 0;
text-align: center;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.05em;
color: #1f194c;
position: relative;
}
#result h2:before {
content: "";
position: absolute;
width: 15%;
height: 3px;
background-color: #5372f0;
left: 42.5%;
bottom: -0.3em;
}
#result h3 {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 0.2em;
color: #1f194c;
}
#result ul {
margin-bottom: 1em;
margin-left: 1.8em;
display: grid;
grid-template-columns: auto auto;
}
#result li {
margin-bottom: 0.3em;
}
#result p {
text-align: justify;
font-weight: 400;
font-size: 0.95em;
}
.msg {
text-align: center;
}
@media screen and (max-width: 600px) {
.container {
font-size: 14px;
}
}Javascript:
Lastly, we implement the functionality using Javascript. Now copy the code below and paste it into your script file.
let result = document.getElementById("result");
let searchBtn = document.getElementById("search-btn");
let url = "https://thecocktaildb.com/api/json/v1/1/search.php?s=";
let getInfo = () => {
let userInp = document.getElementById("user-inp").value;
if (userInp.length == 0) {
result.innerHTML = `<h3 class="msg">The input field cannot be empty</h3>`;
} else {
fetch(url + userInp)
.then((response) => response.json())
.then((data) => {
document.getElementById("user-inp").value = "";
console.log(data);
console.log(data.drinks[0]);
let myDrink = data.drinks[0];
console.log(myDrink.strDrink);
console.log(myDrink.strDrinkThumb);
console.log(myDrink.strInstructions);
let count = 1;
let ingredients = [];
for (let i in myDrink) {
let ingredient = "";
let measure = "";
if (i.startsWith("strIngredient") && myDrink[i]) {
ingredient = myDrink[i];
if (myDrink[`strMeasure` + count]) {
measure = myDrink[`strMeasure` + count];
} else {
measure = "";
}
count += 1;
ingredients.push(`${measure} ${ingredient}`);
}
}
console.log(ingredients);
result.innerHTML = `
<img src=${myDrink.strDrinkThumb}>
<h2>${myDrink.strDrink}</h2>
<h3>Ingredients:</h3>
<ul class="ingredients"></ul>
<h3>Instructions:</h3>
<p>${myDrink.strInstructions}</p>
`;
let ingredientsCon = document.querySelector(".ingredients");
ingredients.forEach((item) => {
let listItem = document.createElement("li");
listItem.innerText = item;
ingredientsCon.appendChild(listItem);
});
})
.catch(() => {
result.innerHTML = `<h3 class="msg">Please enter a valid input</h3>`;
});
}
};
window.addEventListener("load", getInfo);
searchBtn.addEventListener("click", getInfo);📁 Download Source Code: https://www.codingartistweb.com
#html #css #javascript
1596756715
Generics type in C# | Generic Class | Generic Method | C# Bangla Tutorial | Advanced C#
#oop in c# #object oriented programming in c# #object oriented concept in c# #learn oop concept #advance c# #generics type in c#
1596757068
Generics type example in C# | Generic Class | Generic Method | C# Tutorial | Advanced C#
#oop in c# #object oriented programming in c# #object oriented concept in c# #learn oop concept #advance c# #generics type example in c#
1624240146
How to Run C/C++ in Sublime Text?
C and C++ are the most powerful programming language in the world. Most of the super fast and complex libraries and algorithms are written in C or C++. Most powerful Kernel programs are also written in C. So, there is no way to skip it.
In programming competitions, most programmers prefer to write code in C or C++. Tourist is considered the worlds top programming contestant of all ages who write code in C++.
During programming competitions, programmers prefer to use a lightweight editor to focus on coding and algorithm designing. Vim, Sublime Text, and Notepad++ are the most common editors for us. Apart from the competition, many software developers and professionals love to use Sublime Text just because of its flexibility.
I have discussed the steps we need to complete in this blog post before running a C/C++ code in Sublime Text. We will take the inputs from an input file and print outputs to an output file without using freopen file related functions in C/C++.
#cpp #c #c-programming #sublimetext #c++ #c/c++
1597937354
Dicey Issues in C/C++
If you are familiar with C/C++then you must have come across some unusual things and if you haven’t, then you are about to. The below codes are checked twice before adding, so feel free to share this article with your friends. The following displays some of the issues:
- Using multiple variables in the print function
- Comparing Signed integer with unsigned integer
- Putting a semicolon at the end of the loop statement
- C preprocessor doesn’t need a semicolon
- Size of the string matters
- Macros and equations aren’t good friends
- Never compare Floating data type with double data type
- Arrays have a boundary
- Character constants are different from string literals
- Difference between single(=) and double(==) equal signs.
The below code generates no error since a print function can take any number of inputs but creates a mismatch with the variables. The print function is used to display characters, strings, integers, float, octal, and hexadecimal values onto the output screen. The format specifier is used to display the value of a variable.
- %d indicates Integer Format Specifier
- %f indicates Float Format Specifier
- %c indicates Character Format Specifier
- %s indicates String Format Specifier
- %u indicates Unsigned Integer Format Specifier
- %ld indicates Long Int Format Specifier
A signed integer is a 32-bit datum that encodes an integer in the range [-2147483648 to 2147483647]. An unsigned integer is a 32-bit datum that encodes a non-negative integer in the range [0 to 4294967295]. The signed integer is represented in twos-complement notation. In the below code the signed integer will be converted to the maximum unsigned integer then compared with the unsigned integer.
#problems-with-c #dicey-issues-in-c #c-programming #c++ #c #cplusplus